<template>
  <div class="app-container">
    <div class="content-box">

      <!-- 头部最大图 -->
      <div class="header-img">
        <h1 class="header-title">LUNRUO'S CONCEPT OF <br>
          SUSTAINABILITY</h1>
      </div>
      <!-- 文字说明 -->
      <div class="fashion-box">
        <h2 class="series-title">Nature + Civilization = Fashion</h2>
        <h4 class="year-desc">
          Clothing often seems to be with us only for a while, limited
          by comfort, or design judged by fashion, while at LUNRUO, we believe that garments should be sustainable,
          which is not only a definition of fashion, but also a responsibility to the environment and society.
        </h4>
        <h4 class="year-desc">
          LUNRUO is committed to promoting energy-saving and emissions reduction in our production and operations, to
          explore more sustainable opportunities for our customers, suppliers, employees and partners to share a
          healthier, greener and more peaceful future.
        </h4>
      </div>
      <!-- 三大分类 -->
      <div class="series-section">
        <div class="series-list">
          <div class="series-item" v-for="item in imgList" :key="item.id">
            <img :src="item.url" alt="Luxury" />
            <div class="series-name">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <!-- 面料板块 -->
      <div class="fabric-sty">
        <div class="fashion-box">
          <h2 class="series-title">our fabrics</h2>
          <h4 class="year-desc" style="margin-bottom: 60px;">At LUNRUO, our primary objective is to provide women with
            fashionable clothing options
            that are both stylish and sustainable. To achieve this, we carefully select eco-friendly natural fabrics
            such as mulberry silk, triacetate and merino wool, which not only reduce our carbon footprint but also
            minimize waste. We strongly believe that opting for sustainable fashion is not only socially responsible but
            also a step towards a brighter future.
          </h4>
          <!-- 面料分类标签 -->
          <a-radio-group v-model:value="value1" style="width: 100%;" class="custom-radio-group">
            <a-radio-button value="a">Xiangyun Silk</a-radio-button>
            <a-radio-button value="b">Murberry Silk</a-radio-button>
            <a-radio-button value="c">Triacetate</a-radio-button>
            <a-radio-button value="d">Merino Wool</a-radio-button>
          </a-radio-group>
          <!-- 面料分类下的内容 -->
          <div class="series-section1" v-if="value1 == 'a'" style="margin-top: 10px;">
            <div class="series-list1">
              <div class="series-item1" v-for="item in fabricList" :key="item.id">
                <img :src="item.url" alt="Luxury" />
              </div>
            </div>
            <h3 class="sub-label">Xiangyun Silk</h3>
            <h4 class="year-desc">The detergents, solvents and dyes used in the manufacture of the apparel industry
              account for one-fifth of industrial water pollution. LUNRUO is attempting to de-industrialize production
              to contribute to the eco-friendly sustainability of the industry.
            </h4>
            <h4 class="year-desc">The XIANGYUN silk, made with scoparia plant juice as the dye and 100% mulberry silk as
              the embryo, is produced purely and naturally through clay sealing and sun drying. This approach ensures
              that Xiangyun silk is produced purely and naturally, without the use of harmful chemicals or industrial
              processes.
            </h4>
            <h4 class="year-desc">This fabric offers a harmonious blend of luxury and sustainability, its timeless
              appeal ensures that garments made from Xiangyun silk have a longer life, reducing the need for
              replacements and minimizing waste. LUNRUO's dedication to ethical sourcing and eco-friendly processing
              makes Xiangyun silk a valuable addition to your wardrobe, symbolizing both opulence and environmental
              responsibility.
            </h4>
          </div>
          <div class="series-section1" v-if="value1 == 'b'"
            style="display: flex;justify-content: space-between;align-items: center;">
            <div style="width: 48%;display: flex;">
              <img src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/Murberry_Silk-BG.jpg?v=1699022158"
                alt="Luxury" />
            </div>
            <div style="width: 49%;">
              <h3 class="sub-label">Murberry Silk</h3>
              <h4 class="year-desc">Mulberry silk, available through LUNRUO, is an exemplary fabric that embraces
                sustainability. This luxurious textile is produced from silkworms that exclusively feed on mulberry
                leaves, who thrive without the need for chemical pesticides, promoting healthier ecosystems.
                Additionally, the dyeing and finishing processes employed by LUNRUO use environmentally friendly
                methods, significantly reducing water and energy consumption.
              </h4>
              <h4 class="year-desc">Garment disposal has become a global issue, with four-fifths of the world's
                discarded clothing entering the waste stream and being incinerated. At LUNRUO, we hope every garment
                ends up in nature. Mulberry silk is biodegradable, ensuring that it doesn't contribute to environmental
                waste when its life cycle ends. Beyond its eco-friendliness, it is known for its strength an d
                longevity, reducing the frequency of replacement and lessening its overall environmental footprint.
              </h4>
            </div>

            <div>
            </div>
          </div>
          <div class="series-section1" v-if="value1 == 'c'"
            style="display: flex;justify-content: space-between;align-items: center;">
            <div style="width: 48%;display: flex;">
              <img src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/Triacetate-BG.jpg?v=1699248757"
                alt="Luxury" />
            </div>
            <div style="width: 49%;">
              <h3 class="sub-label">Triacetate</h3>
              <h4 class="year-desc">Tri-acetate, offered by LUNRUO, is derived from cellulose, sourced from sustainable
                forestry. This conscientious approach ensures responsible resource management. The production process of
                tri-acetate is designed to be highly efficient, minimizing waste and conserving resources, making it an
                eco-conscious choice for consumers.
              </h4>
              <h4 class="year-desc">Beyond its eco-friendly sourcing and production, tri-acetate has practical benefits
                that contribute to sustainability. Garments made from this fabric are resistant to wrinkles, reducing
                the need for frequent ironing and, in turn, saving energy. Tri-acetate is renowned for its durability
                and low-maintenance properties, meaning that the clothing made from it lasts longer, reducing the
                overall demand for new garments.
              </h4>
            </div>

            <div>
            </div>
          </div>
          <div class="series-section1" v-if="value1 == 'd'"
            style="display: flex;justify-content: space-between;align-items: center;">
            <div style="width: 48%;display: flex;">
              <img src="https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250610153837/20250610153837_6847e0fdce7c5.webp" style="width: 100%;height: 576px;"
                alt="Luxury" />
            </div>
            <div style="width: 49%;">
              <h3 class="sub-label">Merino Wool</h3>
              <h4 class="year-desc">Merino wool from LUNRUO proudly garners the prestigious certification from
                Woolmark.com. This acknowledgment underscores LUNRUO's commitment to responsible sourcing, fostering the
                well-being of both sheep and the environment. Merino wool, renowned for its natural and biodegradable
                properties, stands as a testament to sustainability. It excels in providing exceptional insulation, thus
                reducing the need for artificial heating and cooling.
              </h4>
              <h4 class="year-desc">The durability of this fabric significantly extends the life of garments crafted
                from it, consequently lessening the overall demand for new clothing. Beyond its sustainability merits,
                Merino wool ensures supreme comfort and style, elevating your wardrobe.
              </h4>
            </div>

            <div>
            </div>
          </div>
          <div class="series-section1"
            style="margin-top: 20px;display: flex;justify-content: space-between;padding: 20px;">
            <div style="width: 50%;">
              <h3 class="sub-label">CERTIFICATION</h3>
              <h4 class="year-desc">Certified fabrics not only ensure quality but also reflect a commitment to
                sustainable and environmentally responsible production practices.
              </h4>
              <h4 class="year-desc">LUNRUO is committed to both customer and environmental responsibility. Our fabrics
                are certified by professional agencies, ensuring the safety and quality of our products while
                contributing to sustainable development.
              </h4>
            </div>
            <div style="width: 50%;display: flex;">
              <img
                src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/OEKO_1d08ccbd-6e49-43ea-b281-0061de298524.jpg?v=1724831255"
                alt="Luxury" style="width: 300px;height: 265px;" />
              <img
                src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/FSC_8ed559c4-35d0-4de3-bfc3-048519e815ef.jpg?v=1724831331"
                alt="Luxury" style="width: 300px;height: 265px;" />
            </div>
            <div>
            </div>
          </div>
        </div>

      </div>
      <!-- 套餐模块 -->
      <div class="fabric-sty" style="background-color: #fff;margin-bottom: 60px;">
        <div class="fashion-box">
          <h2 class="series-title">Our Package</h2>
          <h4 class="year-desc">From April 22nd, LUNRUO worldwide stores gradually replace paper bags with eco-friendly
            tote bags and will continuously review our stores to explore the best mechanisms for environmental
            friendliness. We sincerely invite all members to join us in a sustainable romance!
          </h4>
        </div>
        <div class="series-list2">
          <div class="series-item2" v-for="item in setMenuList" :key="item.id">
            <img :src="item.url" alt="Luxury" />
          </div>
        </div>
      </div>
      <!-- 我们的旅程模块 -->
      <div class="fabric-sty">
        <div class="fashion-box">
          <h2 class="series-title">Our Journey</h2>
          <h4 class="year-desc">For more than 30 years, travelled to more than 30 countries and cities, LUNRUO has been
            bringing back and sharing the fashionable quality lifestyle of nature and civilization to all consumers.
          </h4>
        </div>
        <!-- 旅程标签 -->
        <a-radio-group v-model:value="value2" style="width: 100%;" class="custom-radio-group">
          <a-radio-button value="1">GLOBAL JOURNEY</a-radio-button>
          <a-radio-button value="2">TREE HOUSES</a-radio-button>
          <a-radio-button value="3">STORY WITH KOALAS</a-radio-button>
        </a-radio-group>

        <div style="width: 100%;text-align: center;margin-top: 10px;" v-if="value2 == '1'">
          <img src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/GLOBAL_JOURNEY.jpg?v=1699253148"
            alt="Luxury" />

          <div class="fashion-box">
            <h2 class="series-title">GLOBAL JOURNEY</h2>
            <h4 class="year-desc">Since 2002, LUNRUO's Global Journeys have explored over 30 countries and cities,
              including the United States, the United Kingdom, Australia, France, Spain, Italy, and more. These journeys
              have not only been a wellspring of inspiration but have also allowed us to witness the beauty of diverse
              landscapes. We've transformed these experiences into seasonal publications that we proudly share with our
              consumers year after year
            </h4>
            <h4 class="year-desc">The founder of the LUNRUO brand is a passionate advocate of sustainable travel. His
              values and perspectives today are deeply rooted in his eco-conscious adventures. To him, travel is more
              than just discovering new horizons; it's a way to uncover how nature and fashion can harmoniously weave
              into the brand's ethos.
            </h4>
            <h4 class="year-desc">Our fashion designers meticulously track global fashion trends with a sustainability
              perspective. They seek elements that align with GOELIA's sustainable values and then explore eco-conscious
              destinations where these elements can be creatively interpreted. They embark on these journeys, drawing
              sustainable inspiration while they travel and simultaneously sketching their eco-conscious creative
              visions.
            </h4>
          </div>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 10px;" v-if="value2 == '2'">
          <img
            src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/2_9bb89210-adec-4f65-87d2-83bce358d09a.jpg?v=1700447209"
            style="height: 600px;width: 1200px;" alt="Luxury" />

          <div class="fashion-box">
            <h2 class="series-title">TREE HOUSES</h2>
            <h4 class="year-desc">Throughout more than two decades of global traveling, LUNRUO has found boundless
              inspiration in the wonders of both nature and human civilization. This extensive journey has nurtured a
              profound desire to craft a haven where people can completely unwind and reconnect with the natural
              world.Till 2019,we have more than 14,000 trees planted on Kangaroo Island, Autralia.
            </h4>
            <div style="margin-top: 20px;display: flex;justify-content: space-between;align-items: center;">
              <div style="width: 49%;">
                <h4 class="year-desc">In pursuit of this ambitious goal, LUNRUO also has forged partnerships with
                  renowned Tree House Master Takashi Kobayashi and visionary designers from diverse corners of the
                  world. Their combined efforts have resulted in an impressive array of treehouse ideas that are not
                  only breathtakingly beautiful but also environmentally sustainable. These treehouses serve as a
                  testament to human ingenuity, celebrating our deep-rooted connection with the natural world.
                </h4>
              </div>
              <div style="width: 49%;">
                <img src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/TREE_HOUSES.jpg?v=1699254228"
                  alt="Luxury" />
              </div>
              <div>
              </div>
            </div>
          </div>

        </div>
        <div style="width: 100%;text-align: center;margin-top: 10px;" v-if="value2 == '3'">
          <img src="https://cdn.shopify.com/s/files/1/0617/0099/7296/files/STORY_WITH_KOALAS.jpg?v=1699254657"
            alt="Luxury" />

          <div class="fashion-box">
            <h2 class="series-title">STORY WITH KOALAS</h2>
            <h4 class="year-desc">In the summer of 2019, a devastating four-month-long fire engulfed Australia, with
              Kangaroo Island suffering the most. Over half the island's land was reduced to ashes, and it's estimated
              that more than 30,000 koalas perished in the blaze. Upon receiving this heart-wrenching news, the LUNRUO
              team promptly sprang into action, racing to Kangaroo Island to join the valiant efforts to combat the
              raging fire.
            </h4>
            <h4 class="year-desc">It's our unwavering commitment to safeguarding nature and its innocent inhabitants.
              LUNRUO is resolute in doing whatever it takes to protect the environment and its precious creatures,
              driven by a deep-seated love for our planet.
            </h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref<string>('a');
const value2 = ref<string>('1');

const imgList = ref([
  {
    id: '1',
    title: 'Fabrics >',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/Fabrics_e6084d8d-f967-4bb7-b5b9-dee578b93037.jpg?v=1699495944'
  },
  {
    id: '2',
    title: 'package >',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250610152921/20250610152921_6847ded16d0a7.webp'
  },
  // {
  //   id: '3',
  //   title: 'stores >',
  //   url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/stores_cd356122-bc45-4745-9ca0-359fe4324eee.jpg?v=1699495945'
  // },
  {
    id: '4',
    title: 'Our Journey >',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250610152618/20250610152618_6847de1a4f8df.webp'
  }
])
const fabricList = ref([
  {
    id: '1',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/1._Fabric_from_nature.jpg?v=1699242974'
  },
  {
    id: '2',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/2._Scoparia_plant_juice_as_the_dye.jpg?v=1699242974'
  },
  {
    id: '3',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/3._Craftsman_Handmade.jpg?v=1699242974'
  },
  {
    id: '4',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/4._Sun_drying.jpg?v=1699242974'
  }
])
const setMenuList = ref([
  {
    id: '1',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/totebag-1.jpg?v=1699250296'
  },
  {
    id: '2',
    url: 'https://melov-net.oss-us-west-1.aliyuncs.com/upload/20250610154137/20250610154137_6847e1b12354d.webp'
  },
  {
    id: '3',
    url: 'https://cdn.shopify.com/s/files/1/0617/0099/7296/files/totebag-2.jpg?v=1699250296'
  },
])
</script>

<style scoped lang="scss">
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // padding: 0 30px;
}

.content-box {
  margin: 40px auto;
  width: 100%;
}

.header-img {
  padding: 240px 86px 240px 148px;
  width: 100%;
  background-image: url(https://cdn.shopify.com/s/files/1/0617/0099/7296/t/24/assets/our-fabrics-1683364601904.jpg?v=1683364604);
  background-size: cover;
  background-position: center center;
}

.header-title {
  text-align: center;
  font-size: 60px;
  font-weight: 300;
  line-height: 60px;
  margin: 0 0 45px;
  color: #fff;
}

.fashion-box {
  width: 1200px;
  padding: 50px 0;
  margin: 0 auto;
  color: #000000;
  text-align: center;
}

.series-title {
  text-align: center;
  font-weight: 400;
  line-height: 20px;
  font-size: 45px;
  margin: 40px 0px 60px 0px;
}

.year-desc {
  font-size: 16px;
  font-weight: 300;
  color: #000;
  margin: 20px 0 0;
  text-align: left;

}

.series-section {
  width: 2000px;
  text-align: center;
  margin: 0 auto;
}


.series-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.series-item {
  width: 478px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: none !important;
    /* Ensure no transition */
    transform: none !important;
    /* Ensure no transform */
  }

  img:hover {
    transform: none !important;
  }
}

.series-item img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
  transition: transform 0.3s;
}

.series-item img:hover {
  transform: scale(1.03);
}

.series-name {
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
}

.fabric-sty {
  width: 100%;
  background-color: #fffaf7;
}

:deep(:where(.css-dev-only-do-not-override-12unj27).ant-radio-button-wrapper) {
  position: relative;
  display: inline-block;
  height: 62px;
  // margin: 60px 0 0 0;
  padding-inline: 15px;
  padding-block: 0;
  color: #fff;
  font-size: 20px;
  line-height: 62px;
  background: #b8857b;
  border: 1px solid #b8857b;
  border-block-start-width: 1.02px;
  border-inline-start-width: 0;
  border-inline-end-width: 1px;
  cursor: pointer;
  width: 300px;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

:deep(:where(.css-12unj27).ant-radio-button-wrapper) {
  position: relative;
  display: inline-block;
  height: 62px;
  // margin: 60px 0 0 0;
  padding-inline: 15px;
  padding-block: 0;
  color: #fff;
  font-size: 20px;
  line-height: 62px;
  background: #b8857b;
  border: 1px solid #b8857b;
  border-block-start-width: 1.02px;
  border-inline-start-width: 0;
  border-inline-end-width: 1px;
  cursor: pointer;
  width: 300px;
  transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

:deep(:where(.css-dev-only-do-not-override-12unj27).ant-radio-button-wrapper:last-child) {
  border-start-end-radius: 0px;
  border-end-end-radius: 0px;
}

:deep(:where(.css-dev-only-do-not-override-12unj27).ant-radio-button-wrapper:first-child) {
  border-inline-start: 1px solid #d9d9d9;
  border-start-start-radius: 0px;
  border-end-start-radius: 0px;
}

.custom-radio-group {
  text-align: center;

  :deep(.ant-radio-button-wrapper) {
    &:not(:first-child)::before {
      background-color: #d9d9d9;
    }

    &.ant-radio-button-wrapper-checked {
      background-color: #fff;
      border-color: #b8857b;
      color: #b8857b;
      text-decoration: underline;
      text-decoration-color: #b8857b;
      text-decoration-thickness: 1px;

      &::before {
        background-color: #b8857b;
      }
    }
  }
}

.series-section1 {
  text-align: center;
  // margin-top: 10px;
  background-color: #faf8f6;
}


.series-list1 {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.series-item1 {
  width: 292px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: none !important;
    /* Ensure no transition */
    transform: none !important;
    /* Ensure no transform */
  }

  img:hover {
    transform: none !important;
  }
}

.series-item1 img {
  width: 100%;
  height: 384px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
  transition: transform 0.3s;
}

.sub-label {
  text-align: center;
  font-size: 28px;
  margin-bottom: 1px;

}

.series-list2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.series-item2 {
  width: 390px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: none !important;
    /* Ensure no transition */
    transform: none !important;
    /* Ensure no transform */
  }

  img:hover {
    transform: none !important;
  }
}

.series-item2 img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 18px;
  transition: transform 0.3s;
}

// 添加媒体查询
@media (max-width: 1200px) {
  .fashion-box {
    width: 90%;
    padding: 30px 0;
  }

  .header-img {
    padding: 180px 40px;
  }

  .header-title {
    font-size: 48px;
    line-height: 52px;
  }

  .series-title {
    font-size: 36px;
    margin: 30px 0 40px;
  }
}

@media (max-width: 768px) {
  .header-img {
    padding: 120px 20px;
  }

  .header-title {
    font-size: 36px;
    line-height: 40px;
  }

  .series-title {
    font-size: 28px;
    margin: 20px 0 30px;
  }

  .year-desc {
    font-size: 14px;
  }

  .series-list {
    gap: 15px;
  }

  .series-item {
    width: 100%;
    max-width: 400px;

    img {
      height: 450px;
    }
  }

  .series-section1 {
    flex-direction: column;

    >div {
      width: 100% !important;
      margin-bottom: 20px;
    }
  }

  .custom-radio-group {
    :deep(.ant-radio-button-wrapper) {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      width: 200px;
    }
  }
}

@media (max-width: 480px) {
  .header-img {
    padding: 80px 15px;
  }

  .header-title {
    font-size: 28px;
    line-height: 32px;
  }

  .series-title {
    font-size: 24px;
    margin: 15px 0 25px;
  }

  .year-desc {
    font-size: 13px;
  }

  .series-item {
    img {
      height: 350px;
    }
  }

  .series-name {
    font-size: 18px;
  }

  .custom-radio-group {
    :deep(.ant-radio-button-wrapper) {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      width: 150px;
    }
  }

  .sub-label {
    font-size: 22px;
  }
}
</style>